import { Table, TableContainer, TableHead, TableRow, TableCell, TableBody, Paper, IconButton, Collapse, Box, Typography, Snackbar } from "@mui/material";
import ContentCopyIcon from '@mui/icons-material/ContentCopy';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
import "./CommonTable.css";
import FileList from './FileList'
import { Fragment, useState } from "react";
const sharePrefix = process.env.REACT_APP_SHARE_PERFIX;
function CommonRow(props) {
  let row = props.row;
  let onMsg = props.onMsg;

  const [open, setOpen] = useState(false)
  const sharedUrl = window.location.protocol + "//" + window.location.host + sharePrefix + "/" + row.sharedCode;
  function handleCopyClick(e) {
    if (navigator && navigator.clipboard && navigator.clipboard.writeText) {
      navigator.clipboard.writeText(sharedUrl).then(
        () => {
          console.log(sharedUrl)
          onMsg("已复制");
        }
      ).catch(
        () => {
          onMsg("复制失败(3002)");
        }
      );
    } else {
      onMsg("复制失败(3001)");
    }
  }

  return (
    <Fragment>
      <TableRow key={row.sharedCode}>
        <TableCell key={row.sharedCode + "1"}> 
          <IconButton
              aria-label="expand row"
              size="small"
              onClick={() => setOpen(!open)}
            >
              {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
          </IconButton>
        </TableCell>
        <TableCell key={row.sharedCode + "2"}><Typography component="a" target="_blank" href={sharedUrl} fontWeight={600} sx={{textDecoration:'underline', color:'blue', cursor:'pointer'}}>{row.sharedCode}</Typography> <IconButton size="small" color="primary" aria-label="copy shared link" onClick={handleCopyClick} title="复制分享地址" ><ContentCopyIcon fontSize="inherit" /></IconButton> </TableCell>
        <TableCell key={row.sharedCode + "3"}>{row.sharedDateTime}</TableCell>
        <TableCell key={row.sharedCode + "4"}>{row.msg}</TableCell>
      </TableRow>
      <TableRow key={row.sharedCode+"hidden"}>
      <TableCell key={row.sharedCode + "A1"} style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
        <Collapse in={open} timeout="auto" unmountOnExit>
          <Box sx={{ margin: 1 }}>
            <Typography variant="h6" gutterBottom component="div">
              该取件码下的文件
              <FileList sharedCode={row.sharedCode} />
            </Typography>
          </Box>
        </Collapse>
      </TableCell>
      </TableRow>
    </Fragment>
  );
}

const defaultRows = [
  
]

function CommonTable(props) {
  let rows = props.rows === undefined ? defaultRows : props.rows;
  const [hasMsg, setHasMsg] = useState(false);
  const [message, setMessage] = useState(false);

  function handleOnMsg(msg) {
    setHasMsg(true);
    setMessage(msg);
  }

  function handleClose() {
    setHasMsg(false);
  }

  return ( <TableContainer component={Paper}>
      <Table aria-label="collapsible table">
        <TableHead>
          <TableRow key={"head"}>
            <TableCell key={"1"} />
            <TableCell key={"2"} >取件码</TableCell>
            <TableCell key={"3"}>创建时间</TableCell>
            <TableCell key={"4"}>Tips</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
            { rows.map((row) => <CommonRow key={row.id} row={row} onMsg={handleOnMsg}/> ) }
        </TableBody>
      </Table>
      <Snackbar 
                open={hasMsg}
                message={message}
                autoHideDuration={1000}
                onClose={handleClose}
                anchorOrigin={{vertical:'top', horizontal: 'center'}}
            >
                
      </Snackbar>
    </TableContainer>
  );
}


export default CommonTable;